<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
</head>
<body>
    <!-- 头部区域 -->
    <div class="wrapper">
    <div class="text1">
            <a href="#">新品推荐</a></div>
    <div class="text3">    
            <a href="#">在线购买产品</a></div>       
    <div class="text2">
            <a href="#">企业礼包</a></div>
    <div class="text4">      
            <a href="#">品牌介绍</a></div>
    <div class="word1">The <span class="word2">BEST</span> pew is<br>   just <span class="word2">LAMY</span></div>
    </div>
    <!-- 中间区域1 -->
    <br>
    <div class="bj">
     <div class="bj1" style="display: flex;"></div>
     <div class="bj2" style="display: flex;">
        <img src="images/云顶书院全栈方向第一周作业_03.jpg">
        <p style="order:1">Welcome to Lamy<br><br><br><span class="bj3">德国书写工具品牌LAMY始创人C•Josef Lamy于1930年在海德<br>堡创立了欧瑟斯墨水笔制造厂.1952年,崭露头角的LAMY
        流线<br>型墨水笔，震撼问世,彰显公司的创新敏锐触觉。1966年终于打<br>造出令人耳目一新的现代经典之作-LAMY2000系列。产品撮合<br>了聚碳酸酯与不锈钢材质，绝妙的配搭，使之从芸芸众生的书写<br>工具中脱颖而出，时至今日，依然在市场具有影响力。</span></p>
        </div>
        <img src="images/云顶书院全栈方向第一周作业_06.jpg" class="bj4">
    </div>
        <div class="bj5">
            <span class="word3">LAMY</span><span class="word4">各系列</span>
            <div class="bj6">
               
                <div class="word5">【恒星系列 墨水笔 】<br><br>LAMY 恒星系列延续了 LAMY
                    的时尚造型，打造出锦上添花的极致品质
                    。此系列全部均由氧化
                    独特的凹陷式笔握以及弹性铜线笔夹
                    富的颜色让 LAMY 恒星系列突破了传统
                    散发着无限的青春魅力</div>
                <div class="word5">【狩猎系列限量色墨水笔 】<br><br>色彩丰富，颜色亮丽，不仅是可以作为书
                    写工具，同样是很好的装饰品
                    宽大的笔夹设计，可随时夹在包带、牛仔裤、
                    T恤袖口上，让您感受创意方便的携带方式
                    笔身通体材质采用车用强力ABS材料</div>
                <div class="word5">【喜悦系列美术笔 】<br><br>用以绘图、写艺术字、艺术签名
                    扁平状的笔尖设计，适合书写艺术字
                    立体感极佳.1、1.5、1.9三种笔尖可供选择
                    ，可书写粗细不等的立体字，让您随时
                    感受变化的乐趣复古的笔杆设计
                    ，经典又与众不同，显示出独特的欣赏品味</div>
                </div>
                <button>了解详情</button>
            </div>
<!-- 中间区域2 -->
    <div class="bj7">
        <img src="images/云顶书院全栈方向第一周作业_21.jpg">
    </div>
    <div class="bj8">
        <div class="word6">Form Germany</div>
        <div class="word7">What people are saying?</div>
        <div class="bj9">
            <img src="images/云顶书院全栈方向第一周作业_11.jpg" >
            <div class="word8">使用令人难以置信的生产技术和坚持极高水平的精准要求，仅使用一种
        材质，也足以成就出这款永恒的设计。产品本身是体现不同加工程序和
        制造工艺。手工打磨的亚光拉丝表面充分体现了品牌对细节的注重。</div></div>
    </div>
    <div class="bj10">
        <div class="word9">Choose</div>
        <div class="word10">Our products</div>
        <img src="images/云顶书院全栈方向第一周作业_15.jpg"><img src="images/云顶书院全栈方向第一周作业_17.jpg"><img src="images/云顶书院全栈方向第一周作业_19.jpg"><img src="images/云顶书院全栈方向第一周作业_23.jpg"><img src="images/云顶书院全栈方向第一周作业_28.jpg"><img src="images/云顶书院全栈方向第一周作业_25.jpg">
        <button>戳我速购</button>
    </div>
<!-- 尾部区域 -->
    <div class="bj11">
        <div class="bj12">
            <div class="bj13"><img src="images/images/云顶书院全栈方向第一周作业_07.png"></div>
            <div class="word11">You make millions of decisions that is
            mean nothing，and then one day your
            order takes out life.</div>
        </div>
        <div class="bj12">
            <div class="bj13"><img src="images/images/云顶书院全栈方向第一周作业_10.png"></div>
            <div class="word11">It's sad when you realize you aren't
            is as important to someone as you
            thought you were.</div>
        </div>
        <div class="bj12">
            <div class="bj13"><img src="images/images/云顶书院全栈方向第一周作业_12.png"></div>
            <div class="word11">Love is unequal, so don't count how
            much one contributes, and which is
            more active.</div>
        </div>
    </div>
    <div><button>新品推荐</button></div>




</body>
</html>